<template>
	<div class="role-dialog">
		<div class="title">{{ title }}</div>
		<el-form :model="roleInfo" :rules="roleFormRules" ref="roleInfo">
			<div class="menu-dialog">
				<el-form-item label="名称:" prop="name">
					<el-input v-model="roleInfo.name" placeholder="请输入内容"></el-input>
				</el-form-item>
				<el-form-item label="备注:" prop="remark">
					<el-input v-model="roleInfo.remark" placeholder="请输入内容"></el-input>
				</el-form-item>
				<el-form-item label="类型:" prop="type">
					<el-select v-model="roleInfo.type" placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="身份:" prop="role_type">
					<el-select v-model="roleInfo.role_type" placeholder="请选择">
						<el-option v-for="item in roleType" :key="item.role_type" :label="item.type_name" :value="item.role_type"></el-option>
					</el-select>
				</el-form-item>
				<div class="tree-view" v-if="showTree">
					<p>权限分配:</p>
					<el-form-item prop="show">
						<el-tree :data="menuList" show-checkbox node-key="admin_menu_id" :props="defaultProps" @check="checkedNodes"
						 :default-checked-keys="show"></el-tree>
					</el-form-item>
				</div>
				<el-form-item label="上下架:" prop="status">
					<el-switch v-model="roleInfo.status" :active-value="1" :inactive-value="2"></el-switch>
				</el-form-item>
			</div>
			<el-form-item>
				<el-button type="primary" @click="confirmClick('roleInfo')">确 定</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		props: {
			layerid: {
				type: String,
				default: ''
			},
			admin_role_id: {
				type: Number,
				default: 0
			},
			type: {
				type: Number,
				default: 0
			},
			superior: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				title: '',
				show: [],
				options: [{
						value: 1,
						label: '总部'
					},
					{
						value: 2,
						label: '商家'
					},
					{
						value: 3,
						label: '工厂'
					},
					{
						value: 4,
						label: '子公司'
					}
				],
				value: '',
				checkedList: '',
				menuList: [], // 菜单列表
				defaultProps: {
					children: 'sup',
					label: 'title'
				},
				roleInfo: {
					name: '',
					remark: '',
					type: '',
					status: 1,
					show: '',
					role_type: ''
				},
				roleType: [],
				roleFormRules: {
					name: [{
						required: true,
						message: '请输入名称'
					}],
					role_type: [{
						required: true,
						message: '请选择身份'
					}],
					remark: [{
						required: true,
						message: '请输入备注'
					}],
					type: [{
						required: true,
						message: '请选择角色类型'
					}]
				},
				showTree: false
			};
		},
		methods: {
			// 初始化列表
			init() {
				this.$http(this.$ApiList.RoleInfo).then(res => {
					this.menuList = res.datas.list;
				});
				if (this.type == 1) {
					this.title = '编辑角色';
					let data = {
						admin_role_id: this.admin_role_id
					};
					this.$http(this.$ApiList.RoleInfo, data).then(res => {
						this.menuList = res.datas.list;
						this.roleInfo = res.datas.info;
						this.roleInfo.role_type = String(res.datas.info.role_type)
						let show = res.datas.info.show.split(',');
						for (var i = 0; i < show.length; i++) {
							if (i % 2 != 0) {
								this.show.push(show[i]);
							}
						}
					});
				} else {
					this.title = '添加角色';
					if (this.superior == 1) {
						// superior 1添加下级
						this.title = '添加下级';
						this.roleInfo.parent_id = this.admin_role_id;
					}
				}
				this.$nextTick(() => {
					this.showTree = true
				})
			},
			checkedNodes(data, checked) {
				//console.log(checked.checkedNodes);
				this.checkedList = checked.checkedNodes;
			},
			//提交
			confirmClick(formName) {
				if (this.checkedList.length != 0) {
					this.roleInfo.show = '';
					this.checkedList.forEach(item => {
						if (item.parent_id == 0) {} else {
							this.roleInfo.show += item.parent_id + ',' + item.admin_menu_id + ',';
						}
					});
					this.roleInfo.show = this.roleInfo.show.substr(0, this.roleInfo.show.length - 1);
				}

				this.$refs[formName].validate(valid => {
					if (valid) {
						if (this.type == 0) {
							this.roleInfo.parent_id = 0
							this.$http(this.$ApiList.RoleAdd, this.roleInfo).then(res => {
								this.$layer.msg('添加成功');
								this.roleInfo.show = '';
								// this.$parent.init()
								// this.cancel();
								this.$emit('success')
							});
						} else if (this.type == 1) {
							this.$http(this.$ApiList.RoleEdit, this.roleInfo).then(res => {
								this.$layer.msg('编辑成功');
								this.roleInfo.show = '';
								// this.$parent.init()
								// this.cancel();
								this.$emit('success')
							});
						}
					} else {
						this.$layer.msg('请填写完整信息后提交');
					}
				});
			},
			cancel() {
				this.$layer.close(this.layerid);
			},
			getRole() {
				this.$http(this.$ApiList.RoleTypeList).then(res => {
					this.roleType = res.datas
				});
			}

		},
		created() {
			this.init();
			this.getRole()
		}
	};
</script>
<style>
	.vl-notify-msg{
		z-index: 3000;
	}
	.role-dialog {
		padding: 30px;
	}
</style>
